<style lang="less">
    @import '../../styles/common.less';
    @import './table.less';
</style>

<template>
    <div>
        <Row>
            <Card>
                <div class="edittable-con-1">
                    <can-edit-table refs="table1" @click="actionClick" @on-delete="handleDel" :action-button="actionButton" :action-button-title="actionButtonTitle" @on-cancel="handleCancel" v-model="tableData" :columns-list="columnsList"></can-edit-table>
                </div>
            </Card>
        </Row>

    </div>
</template>

<script>
    import canEditTable from './canEditTable.vue';
    import tableData from './table_data.js';
    export default {
        name: 'editable-table',
        components: {
            canEditTable
        },
        data () {
            return {
                columnsList: [],
                tableData: [],
                actionButton: ['detail', 'skip', 'word', 'mf', 'hello'],
                // actionButtonTitle: {detail: '详情', skip: '跳转', word: '世界', mf: '苗飞'},
                actionButtonTitle: {
                    'detail': {'detail1': '详情1', 'detail2': '详情2', 'detail3': '详情3'},
                    'skip': {'skip1': '跳转1', 'skip2': '跳转2', 'skip3': '跳转3'},
                    'word': {'word1': '世界1', 'word2': '世界2', 'word3': '世界3'},
                    'mf': {'mf1': '苗飞1', 'mf2': '苗飞2', 'mf3': '苗飞3'},
                    'hello': {
                        'hello': 'hello word'
                    }
                }
            };
        },
        methods: {
            getData () {
                this.columnsList = tableData.table1Columns;
                this.tableData = tableData.table1Data;
            },
            handleDel (val, index) {
                this.$Message.warning('删除了第' + (index + 1) + '行数据');
            },
            handleCancel (val, index) {
                this.$Message.error('取消了第' + (index + 1) + '行数据');
            },
            actionClick (val, title, action, index) {
                switch (this.actionButtonTitle[title][action]) {
                    case 'hello word':
                        this.$Modal.success({
                            closable: true,
                            title: title,
                            content: this.actionButtonTitle[title][action]
                        });
                        break;
                    default:
                        this.$Modal.success({
                            closable: true,
                            title: title,
                            content: this.actionButtonTitle[title][action]
                        });
                }
            }
        },
        created () {
            this.getData();
        }
    };
</script>

